<template>
  <el-container class="el-container-h">
    <el-aside width="200px" class="el-aside-h">
      <div class="login-img">
        <img :src="noPicture.src">
      </div>
      <div class="login-name">{{ user.name }}</div>
      <div class="login-out">
        <el-button
          type="primary"
          size="mini"
          round
          @click="signOut"
        >退出</el-button>
      </div>
      <panel-tree
        :data="menu"
        :show-icon="true"
        :show-filter="false"
        @click="menuNav"
      />
    </el-aside>
    <el-main :class="['el-main-h', { 'el-main-h-404': is404 }]">
      <router-view v-if="!is404" />
      <item-group v-if="hasChildren" :data="data.children" />
    </el-main>
  </el-container>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import ItemGroup from '@components/ItemGroup.vue'
export default {
  name: 'Web',
  components: {
    PanelTree: () => import('@components/PanelTree.vue'),
    ItemGroup
  },
  data() {
    return {
      // 显示默认图片
      noPicture: { src: require('@assets/image/no_picture.jpg') },
      data: {}
    }
  },
  computed: {
    ...mapState({
      PRIVILEGE: state => state.constant.PRIVILEGE,
      user: state => state.authentication.data,
      menu: state => state.userProfile.menu,
      component: state => state.component.component
    }),
    ...mapGetters(['router']),
    hasChildren() {
      return this.isComponent && !this.componentId && this.data.children
    },
    // 是否显示404页面
    is404() {
      if (this.isComponent) {
        if (this.data.relation_flag === null) {
          return false
        } else {
          return !(this.componentId || this.hasChildren)
        }
      } else {
        return !this.linkUrl
      }
    },
    // 是否有权限
    privilege() {
      if (this.isComponent) {
        if (this.data.relation_flag === null) {
          return this.PRIVILEGE.NO
        } else {
          return this.data.relation_flag
            ? this.PRIVILEGE.FULL
            : this.PRIVILEGE.READONLY
        }
      } else {
        return this.PRIVILEGE.READONLY
      }
    },
    // true-内部组件,false-外部链接
    isComponent() {
      return (
        this.data &&
        this.data.info &&
        this.data.info.componentFlag &&
        this.data.info.componentFlag.trim() &&
        this.data.info.componentFlag.trim().toLowerCase() === 'true'
      )
    },
    // 外部链接地址
    linkUrl() {
      console.log('linkUrl', this.data)
      return this.data &&
        this.data.info &&
        this.data.info.outLinkBaseUrl &&
        this.data.info.outLinkBaseUrl.trim() &&
        this.data.info.linkUrl &&
        this.data.info.linkUrl.trim()
        ? this.data.info.outLinkBaseUrl.trim() + this.data.info.linkUrl.trim()
        : null
    },
    // 内部组件
    componentId() {
      const component =
        this.data &&
        this.data.info &&
        this.data.info.componentId &&
        this.data.info.componentId.trim() &&
        this.data.info.componentFile &&
        this.data.info.componentFile.trim()
          ? this.data.info.componentId.trim()
          : null
      return component && this.component[component] ? component : null
    }
  },
  watch: {
    router(val, oldVal) {
      this.$router.addRoutes(val)
    }
  },
  created() {
    this.initData()
  },
  methods: {
    ...mapActions({
      signOut: 'signOut'
    }),
    initData() {
      // 获取默认页面
      this.data = {}
    },
    menuNav(data) {
      if (this.data !== data) {
        this.data = { ...data }
        if (this.isComponent) {
          if (this.privilege === this.PRIVILEGE.NO) {
            this.$message.warning('您暂无权限使用该功能!')
          } else {
            this.$router.push(`/${this.componentId}`)
          }
        } else {
          if (this.linkUrl) {
            window.open(this.linkUrl)
          }
        }
      }
    }
  }
}
</script>
<style>
.explorer-content {
  position: relative;
}
</style>
<style scoped>
.el-container-h {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
}
.el-main-h {
  padding: 0;
  position: relative;
}
.el-aside-h {
  background-color: #b3c0d1;
  color: #333;
}
.el-aside-h /deep/ .list-node {
  color: #333;
}
.el-main-h-404 {
  background: url(../../assets/image/404_bk.jpg) no-repeat center center #75787d;
  background-size: cover;
  overflow: hidden;
}
.login-img {
  width: 8rem;
  height: 4rem;
  display: flex;
  align-items: center;
  margin: 1rem auto;
  text-align: center;
  border: 1px solid #333;
  border-radius: 50%;
  overflow: hidden;
}
.login-img img {
  width: 100%;
  height: auto;
}
.login-name {
  text-align: center;
  font-size: 1.4rem;
  color: #fff;
}
.login-out {
  padding: 1.5rem;
  padding-top: 1rem;
}
.login-out button {
  width: 100%;
}
</style>
